import { h, nextTick, reactive, ref, watch } from "vue";
import hostelSelect from './hostelSelect.vue'
// import CurrencyRadio from '@/components/currency/radio/index.vue'
// import { getStudentBuildList, getStudentHostelList, getStudentRoomList } from "@/api/staffManagement";
import { polityIdentity, studentStatus } from "@/enum";
// import { getGradeList } from "@/api/userManagement";
// import { list } from "@/api/collegeDepartmentManagement/class";
import { refs } from "dsrz/utils";

const selectProps = {
  value: 'id',
  label: 'name'
}
const hostelSelectVal = ref({})

const dateVal = ref('')
const campus = ref<number>()
const build = ref<number>()

interface optionsType {
  value: string | number,
  lable: string
}
// 获取宿舍校区
const options = ref([
  { name: '本校', id: 1 },
  { name: '外校', id: 2 },
])
const options1 = ref<optionsType[]>([])
const options2 = ref<optionsType[]>([])
const editOptions = (data: { options1: optionsType[], options2: optionsType[] }) => {
  options1.value = data.options1
  options2.value = data.options2
}
const gradeOptions = ref([])
const classOptions = ref([])
const getHostel = async () => {
  //   const res = await getStudentHostelList({})
  //   console.log('==  获取 校区 11 ', res.data)
  //   options.value = res.data
  //   console.log(options.value , '---getStudentHostelList');
  //   // 年级
  // const gradeList = await getGradeList({ enable: 1 })
  //   gradeOptions.value = gradeList.data
    // 班级
    // const classList = await list()
    // classOptions.value = classList.data
}
getHostel()

const getClassList = async(e: number) => {
  const classList = await list({
    gradeId: e,
    enable: 1
  })
  classOptions.value = classList.data
}

nextTick(() => {
  hostelSelectVal.value = refs.editStudentRef?.hostelSelectVal || {};
});
watch(
  () => refs.editStudentRef?.hostelSelectVal,
  (newVal) => {
    hostelSelectVal.value = newVal;
  },
  { immediate: true } // 初始化立即执行一次
);

const pattern = {
  pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
  message: "请输入有效的11位手机号",
  trigger: "blur"
}
const rules = reactive({
  nickname: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  sex: [{ required: true, message: '请选择性别', trigger: ['blur', 'change'] }],
  username: [{ required: true, message: '请输入学号', trigger: 'blur' }],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    pattern
  ],
  nation: [{ required: true, message: '请输入民族', trigger: 'blur' }],
  status: [{ required: true, message: '请选择学籍状态', trigger: ['blur', 'change'] }],
  polityIdentity: [{ required: true, message: '请选择政治面貌', trigger: ['blur', 'change'] }],
  belief: [{ required: true, message: '请输入宗教信仰,若无宗教信仰填写“无”即可', trigger: 'blur' }],
  gradeId: [{ required: true, message: '请选择年级', trigger: ['blur', 'change'] }],
  classId: [{ required: true, message: '请选择行政班级', trigger: ['blur', 'change'] }],
  // roomId: [{ required: false, message: '请选择宿舍信息', trigger: ['blur', 'change'] }],
  practice: [{ required: true, message: '请选择是否校外实习', trigger: 'blur' }],
  birthDate: [{ required: true, message: '请选择出生年月日', trigger: 'blur' }],
  enable: [{ required: true, message: '请选择账号状态', trigger: 'blur' }],
  fatherTel: [
    { required: false, message: '请输入父亲联系方式', trigger: 'blur' },
    pattern
  ],
  motherTel: [
    { required: false, message: '请输入母亲联系方式', trigger: 'blur' },
    pattern
  ],
  address: [{ required: true, message: '请输入家庭住址', trigger: 'blur' }],
})

const card = reactive({
  items: [{
    title: '基本信息',
    details: {},
    is: 'currency-form',
    bind: {
      formRef: 'InfoRef', // 设置表单引用名称
      modelValue: {}, // 表单数据绑定，会在 CurrencyCard 中自动替换为 params
      items: [
        {
          span: 6,
          label: '姓名',
          prop: 'nickname',
          is: 'el-input',
          bind: {
            placeholder: '请输入姓名',
            clearable: true,
          },
        },
        {
          span: 6,
          label: '性别',
          prop: 'sex',
          is: 'CurrencySelect',
          bind: {
            options: [
              {
                value: 1,
                label: '男',
              },
              {
                value: 2,
                label: '女',
              }
            ],
            placeholder: '请选择性别',
            clearable: true,
          },
        },
        {
          span: 6,
          label: '学号',
          prop: 'username',
          is: 'el-input',
          bind: {
            placeholder: '请输入学号',
            clearable: true,
          },
        },
        {
          span: 6,
          label: '手机号',
          prop: 'phone',
          is: 'el-input',
          bind: {
            placeholder: '请输入手机号',
            clearable: true,
          },
        },
        {
          span: 6,
          label: '民族',
          prop: 'nation',
          is: 'el-input',
          bind: {
            placeholder: '请输入民族',
            clearable: true,
          },
        },
        {
          span: 6,
          label: '学籍状态',
          prop: 'status',
          is: 'CurrencySelect',
          bind: {
            options: studentStatus,
            placeholder: '请选择学籍状态',
            clearable: true,
            filterable: true,
          },
        },
        {
          span: 6,
          label: '政治面貌',
          prop: 'polityIdentity',
          is: 'CurrencySelect',
          bind: {
            options: polityIdentity,
            placeholder: '请选择政治面貌',
            clearable: true,
            filterable: true,
          },
        },
        {
          span: 6,
          label: '宗教信仰',
          prop: 'belief',
          is: 'el-input',
          bind: {
            placeholder: '请输入宗教信仰',
            clearable: true,
          },
        },
        {
          span: 6,
          label: '年级',
          prop: 'gradeId',
          is: 'CurrencySelect',
          bind: {
            // options: polityIdentity,
            options: [
              { label: '一年级', value: 1 },
              { label: '二年级', value: 2 },
              { label: '三年级', value: 3 },
              { label: '四年级', value: 4 },
            ],
            placeholder: '请选择年级',
            clearable: true,
            filterable: true,
          },
        },

        {
          span: 18,
          label: '宿舍',
          prop: 'roomId',
          is: h(hostelSelect),
          bind: {
            hostelSelectVal,
            options: options,
            options1: options1,
            options2: options2,
          },
        },


        {
          span: 6,
          label: '行政班级',
          prop: 'classId',
          is: 'CurrencySelect',
          bind: {
            // options: classOptions,
            options: [
              { label: '一年级', value: 1 },
              { label: '二年级', value: 2 },
              { label: '三年级', value: 3 },
              { label: '四年级', value: 4 },
            ],
            placeholder: '请选择行政班级',
            clearable: true,
            filterable: true,
          },
        },
        {
          span: 6,
          label: '是否校外实习',
          prop: 'practice',
          is: 'CurrencyRadio',
          bind: {
            options: [
              {
                value: true,
                label: '是'
              },
              {
                value: false,
                label: '否'
              },
            ],
            placeholder: '请输入角色名称',
            clearable: true,
          },
        },
        {
          span: 6,
          label: '出生年月日',
          prop: 'birthDate',
          is: 'CurrencyDatePicker',
          bind: {
            'v-model': dateVal.value,
            type: "date",
            format: "YYYY/MM/DD",
            'value-format': "YYYY-MM-DD",
            placeholder: '请选择出生年月日',
            clearable: true,
          },
        },
        {
          span: 6,
          label: '账号状态',
          prop: 'enable',
          is: 'CurrencyRadio',
          bind: {
            options: [
              {
                value: true,
                label: '启用'
              },
              {
                value: false,
                label: '禁用'
              },
            ],
            placeholder: '请输入角色名称',
            clearable: true,
          },
        },
        {
          span: 6,
          label: '父亲联系方式',
          prop: 'fatherTel',
          is: 'el-input',
          bind: {
            placeholder: '请输入父亲联系方式',
            clearable: true,
          },
        },
        {
          span: 6,
          label: '母亲联系方式',
          prop: 'motherTel',
          is: 'el-input',
          bind: {
            placeholder: '请输入母亲联系方式',
            clearable: true,
          },
        },
        {
          span: 12,
          label: '家庭住址',
          prop: 'address',
          is: 'el-input',
          bind: {
            style: "width: var(--dsrz-form-width-2)",
            type: 'textarea',
            placeholder: '请输入家庭住址',
            clearable: true,
          },
        },
      ],
      rules: {
        nickname: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: ['blur', 'change'] }],
        username: [{ required: true, message: '请输入学号', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          pattern
        ],
        nation: [{ required: true, message: '请输入民族', trigger: 'blur' }],
        status: [{ required: true, message: '请选择学籍状态', trigger: ['blur', 'change'] }],
        polityIdentity: [{ required: true, message: '请选择政治面貌', trigger: ['blur', 'change'] }],
        belief: [{ required: true, message: '请输入宗教信仰,若无宗教信仰填写“无”即可', trigger: 'blur' }],
        gradeId: [{ required: true, message: '请选择年级', trigger: ['blur', 'change'] }],
        classId: [{ required: true, message: '请选择行政班级', trigger: ['blur', 'change'] }],
        practice: [{ required: true, message: '请选择是否校外实习', trigger: 'blur' }],
        birthDate: [{ required: true, message: '请选择出生年月日', trigger: 'blur' }],
        enable: [{ required: true, message: '请选择账号状态', trigger: 'blur' }],
        fatherTel: [
          { required: false, message: '请输入父亲联系方式', trigger: 'blur' },
          pattern
        ],
        motherTel: [
          { required: false, message: '请输入母亲联系方式', trigger: 'blur' },
          pattern
        ],
        address: [{ required: true, message: '请输入家庭住址', trigger: 'blur' }],
      },
      labelPosition: 'top',
    }
  }]
})

export {
    rules,
    campus,
    build,
    card,
    editOptions,
    getClassList
}